import '../scss/reset.css';
import '../scss/admin_common.css';
import '../layui/css/layui.css';
import '../scss/add_edit_prod.css';



;(function($){
	//七牛云图片集合
	var qiniuImgKeyList = [];
	var sourceImgUrlList = [];
	
	let $productForm = $('.js_product_form'),
			$submitBtn = $('.js_product_form').find('#js_p_submit_btn'),
			$uploadProcess = $('.js_product_form').find('.js_upload_process'), 
			$imgUrlContainer = $('.js_product_form').find('.js_show_img_container'),
			$upFileInput = $('.upFileInput');

	let isEdit = false;
			
	let init = () => {
		checkIsEdit();
		getUploadToken();
		bindEvent();
	}
	
	init();
	
	function bindEvent () {
		$submitBtn.click(upLoadProductData);
	}

	/* 检测是否是编辑状态*/
	function checkIsEdit () {
		//以pid区分编辑和添加的情况
		let pid = document.getElementById('pid');
		console.log(pid);
		if(pid) {
			isEdit = true;
			$('#js_p_submit_btn').text('编辑产品');
		}
	}
		
	/* 获取token*/
	function getUploadToken(){
		$.ajax({
			url: 'http://localhost:3005/admin/get-qiniu-token',
			// url: 'http://wujinhui.xyz/api/teacher',
			type: 'GET',
			// data: {},
			dataType: 'JSON',
			success:  (data) => {
				uploadImage(data.uploadToken, (res) => {
					//调用函数设置返回的qiniu图片地址的url设置到input的value上
					qiniuImgKeyList.push(res.key);
				});
			},
			error: (err)=> [
				console.log(err)
			]
		});
	}
	
	/* 上传数据函数*/
	function upLoadProductData () {
		if (checkInput() === true) {
			let data = makeProductData($productForm);
			postProductData(data, (res)=> {
				if(isEdit) {
					console.log('编辑成功!');
					alert('编辑产品成功!');
				}else {
					console.log('添加成功!');
					alert('添加产品成功!');
				}
			
				window.location.href = 'http://localhost:3005/admin/manage-product';
			})
		}
	}
	
	/* 获取并组装上传的数据*/
	function makeProductData ($form) {
		let data = {};
    let name, 
        value;
		let $inputs = $form.find('input');
		let $textarea = $form.find('textarea');
		//获取输入数据
		$inputs.each( (index, item) => {
			if($(item).prop('type') === 'text'){
				name = $(item).prop('name');
				value = $(item).prop('value');
				data[name] = value;
			}
		})
		//获取介绍
		data[$textarea.prop('name')] = $textarea.val();
		//获取图片集合
		let imgUrlStr = qiniuImgKeyList.join(',');
		//判断是否是编辑状态
		if(isEdit === true){
			//编辑
			data['pid'] = $('#pid').val();
			if(imgUrlStr){
				data.pImgUrlKey = imgUrlStr;
			}
		}else {
			//添加产品pid
			data['pid'] = Math.floor(Math.random() * 100000000);
			data.pImgUrlKey = imgUrlStr;
		}
		return data;
	}
	
	/* 验证输入有效性*/
	function checkInput () {
		//定义空标志
		let isEmpty = false; 
		let $form = $productForm;
		let $inputs = $form.find('input');
		let $textarea = $form.find('textarea');
		//检查数据输入
		$inputs.each( (index, item) => {
			if($(item).prop('type') === 'text'){
				name = $(item).prop('name');
				value = $(item).prop('value');
				if(value === ''){
					isEmpty = true;
					alert('您的某项输入不能为空！');
				}
			}
		})
		//检查介绍输入
		if($textarea.val() === ''){
			isEmpty = true;
			alert('您的产品介绍不能为空！');
		}
		//非编辑状态一定检查
		if(isEdit === false) {
			//检查图片是否上传到七牛
			if(qiniuImgKeyList.length === 0) {
				isEmpty = true;
				alert('您还未上传产品的图片！');
			}
		}
		//空标志为假时, 检查通过
		return isEmpty === false ? true : false;
	}				
	
	/* post数据 ajax*/
	function postProductData (data, success) {
		$.ajax({
			url: 'http://localhost:3005/admin/post-add-edit-product-data',
			// url: 'http://wujinhui.xyz/api/teacher',
			type: 'POST',
			data: data,
			dataType: 'JSON',
			success:  (res) => {
				success(res);
			},
			error: (err)=> {
				console.log(err);
      }
		});
	}
	
	/* 显示上传图片*/
	function showImgSourseList () {
		sourceImgUrlList.push($upFileInput.val().replace(/C\:\\fakepath\\/, ''));
		let list = '';
		sourceImgUrlList.forEach((item) => {
			list += `<li>${item}</li> <br/>`;
		})
		$imgUrlContainer.html(list);
	}
	
	/* 上传图片到七牛云并获取imgKey*/
	function uploadImage (qiniuTK, callback) {
		// 七牛token
		var qiniuToken = qiniuTK;
		$("#upload").click(function(){
				var obj = $("#file"); 
				// 获取文件在本地的绝对路径 C:\fakepath\cover.jpg
				var fileName = obj.val();
				// 获取文件后缀名 .jpg
				var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length)
				// 获取文件对象
				var file = obj.get(0).files[0]
				// 获取文件大小 单位KB
				var size = (file.size / 1024).toFixed(2)
				
				// 设置上传的七牛key 上传成功需要把这个值提交到后台
				var qiniuKey = "product/"+ Math.floor(Math.random() * 100000000) + suffix;
				
				// 上传文件到七牛
				var observer = {
						//上传过程的监听函数 result参数带有total字段的 object，包含loaded、total、percent三个属性)
						next(result){
								// 实现上传进度条 ... 
								// console.log(result)
								$uploadProcess.text('上传中..');
								
						},
						//上传失败回调
						error(err){             
								// console.log(err.message)
								$uploadProcess.text('上传失败..');
						},
						// 上传完成回调
						complete(res){
								// 提交数据给后端同事等业务逻辑 ....
								$uploadProcess.text('上传成功!');
								showImgSourseList();
								callback(res);
						}
				};
				var putExtra = {
						//原文件名
						fname: "",
						//用来放置自定义变量
						params: {},
						//限制上传文件类型
						mimeType: null
				};
				var config = {
						//存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
						region:qiniu.region.z2,
						//分片上传的并发请求量
						concurrentRequestLimit:2
				};
				
				//这里开始配置和执行上传
				var observable = qiniu.upload(file,qiniuKey,qiniuToken,putExtra,config);
				// 上传开始
				var subscription = observable.subscribe(observer);
				// 取消上传
				// subscription.unsubscribe();
		})
	}
})($);